<template>
    <div class="message">
        <div class="item">
            <h3>IM星际邮票</h3>
            <p>IM-8A19F</p>
        </div>
        <div class="item">
            <h3>星际邮票电子版专属姓名</h3>
            <input type="text" name="" id="" class="name" placeholder="点击输入姓名">
        </div>
        <div class="uploader">
            <van-uploader accept="video/*" :max-size="300*1024*100" :after-read="afterRead" @oversize="onOversize">
                <img src="../assets/images/hj.svg" alt="" srcset="">
            </van-uploader>
            <p class="des">上传专属视频后将发射升空</p>
        </div>
        <van-overlay :show="show">
            <div class="wrapper" @click.stop>
                <van-loading type="spinner" color="#ffffff" />
            </div>
        </van-overlay>
    </div>
</template>
<script>
export default {
    data(){
        return{
            show:false
        }
    },
    methods:{
        //文件读取完成后
        afterRead(event){
            const {file} = event
            console.log('file-----------',file)
            this.show = true
        },
        onOversize(file) {
            this.$toast('文件大小不能超过 30m');
        },
    }
}
</script>
<style lang="scss" scoped>
    .message{
        width: 100%;
        height: 100vh;
        background-color: black;
        overflow: hidden;
        .item{
            width: 5rem;
            padding: 0.3rem 0.6rem 0.5rem 0.6rem;
            margin: 0.3rem auto;
            color:#fff;
            text-align: left;
            border: 1px solid #555555;
            h3{
                font-size: 16px;
            }
            p{
                font-size: 12px;
                line-height: 0.8rem;
                color: rgb(182, 184, 184);
                border-bottom: 1px solid #555555;
            }
            .name{
                background-color: transparent;
                border: 0;
                border-bottom: 1px solid #555555;
                width: 100%;
                margin-top: 15px;
            }
        }
        .uploader{
            margin: 0.2rem auto;
            position: absolute;
            left: calc(50% - 1.3rem);
            bottom: 1rem;
            img{
                width: 1.5rem;
                height: 1.5rem;
                animation: move 0.8s infinite alternate ease-in-out;
            }
            .des{
                font-size: 12px;
                margin-top: 10px;
                color:rgb(182, 184, 184)
            }
        }
        .wrapper{
            margin-top: 1rem;
        }
    }
    @keyframes move
    {
        from {
            transform: translateY(0.2rem)
        }
        to {
            transform: translateY(0rem)
        }
    }
</style>